<template>
  <view class="case-page">
    <view class="page-title">案例</view>
    <view class="btn-list">
      <button class="api-btn" @click="goToLogin">登录</button>
      <button class="api-btn" @click="goToCityExplore">城市探索</button>
      <button class="api-btn" @click="goToNewsList">新闻列表</button>
      <button class="jump-btn" @click="goToCommunication">组件传值</button>
    </view>
    <PageNav currentPage="case" />
  </view>
</template>

<script setup>
import PageNav from '@/components/PageNav.vue';

const goToLogin = () => {
  uni.navigateTo({ url: '/pages/login/login' });
};

const goToCityExplore = () => {
  uni.navigateTo({ url: '/pages/city-explore/city-explore' });
};

const goToNewsList = () => {
  uni.switchTab({ 
    url: '/pages/news-list/news-list',
    fail: (err) => {
      console.error('跳转新闻列表页失败：', err);
      uni.showToast({ title: '跳转失败', icon: 'none' });
    }
  });
};

const goToCommunication = () => {
  uni.navigateTo({ 
    url: '/pages/communication/CommunicationPage',
    fail: (err) => {
      console.error('跳转组件传值页失败：', err);
      uni.showToast({ title: '跳转失败', icon: 'none' });
    }
  });
};
</script>

<style scoped>
.case-page {
  padding: 20rpx;
  min-height: 100vh;
  padding-bottom: 100rpx;
  box-sizing: border-box;
}
.page-title {
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  margin: 30rpx 0;
  color: #333;
}
.btn-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  width: 100%;
  max-width: 500rpx;
  margin: 0 auto;
}
.api-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #f5f5f5;
  color: #333;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
}
.jump-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #e8f4fd;
  color: #007aff;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
}
</style>